<template>
	<view>
		<!-- #ifdef H5 -->
		<view class="header">
			<view :style="'padding-top:' + statusBarHeight + 15 + 'px;'">
				<text class="fs-20 fw-600 text-grey-3 py-12 px-20">
					百科
				</text>
			</view>
			<y-category :list="categoryList" @changeId="changeId" v-if="categoryList.length>0"></y-category>
		</view>

		<!-- #endif -->

		<!-- #ifndef H5 -->
		<view class="header">
			<view :style="'padding-top:' + statusBarHeight+ 'px;'">
				<text class="fs-20 fw-600 text-grey-3 py-12 px-20">
					百科
				</text>
			</view>
		</view>
		<y-category :list="categoryList" @changeId="changeId" v-if="categoryList.length>0"></y-category>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN -->
		<view v-if="WEBCONFIG?.weixin_video_status && WEBCONFIG?.weixin_video_status == 1" class="w-p-100">
			<ad :unit-id="WEBCONFIG?.weixin_video_ad_id" ad-theme="white"></ad>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-TOUTIAO -->
		<view class="w-p-100" v-if="WEBCONFIG?.douyin_video_status && WEBCONFIG?.douyin_video_status == 1">
			<ad :unit-id="WEBCONFIG?.douyin_video_ad_id" ad-theme="white"></ad>
		</view>
		<!-- #endif -->

		<z-paging ref="paging" use-page-scroll :top-z-index='1' @query="getList" v-model="list" :auto="false"
			:refresher-enabled="refresher">
			<view class="p-12">
				<view class="bg-white rounded-12 p-12 flex mb-12" v-for="(item,index) in list" :key='index'
					@click="$page.open('/pages/article/detail?id=' +item.id)">
					<view class="flex flex-column flex-x-space-between py-1 flex-1">
						<text class="text-grey-3 fs-16 fw-600 text-spacing-2">
							{{item.name}}
						</text>
						<view class="text-grey-4 flex flex-x-space-between fs-12">
							<text>{{item.page_view}}人浏览</text>
							<text>{{item.create_at}}</text>
						</view>
					</view>
					<image :src="item.image" class="w-126 h-86 ml-9"></image>
				</view>
			</view>
		</z-paging>
		<y-tabbar></y-tabbar>
	</view>
</template>

<script setup>
	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
	import { ref } from 'vue';
	import { $http, $page } from '@/utils';
	import { onLoad, onShow, onPageScroll, onReachBottom } from '@dcloudio/uni-app'
	import { useWebConfigStore, useRefs } from "@/stores/index";
	import { $interstitialAd} from '@/utils/ad'
	const { WEBCONFIG } = useRefs(useWebConfigStore());
	const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
	const categoryList = ref([])
	const paging = ref()
	const refresher = ref(false)
	const list = ref([])
	useZPaging(paging)
	const queryForm = ref({
		page: 1,
		limit: 2,
		category_id: 0
	})
	onLoad(() => {
		// #ifdef MP||MP-TOUTIAO
		if (WEBCONFIG.value?.weixin_interstitial_status == '1') {
			$interstitialAd.init(WEBCONFIG.value?.weixin_interstitial_ad_id)
			$interstitialAd.show()
		}
		// #endif
	})

	onShow(() => {
		getCategory()
	})
	const getCategory = () => {
		$http.get('Article/getCategory').then(res => {
			categoryList.value = res.data
			if (res.data.length > 0) {
				if (res.data[0]['children']) {
					queryForm.value.category_id = res.data[0]['children'][0]['value']
				} else {
					queryForm.value.category_id = res.data[0]['value']
				}
				paging.value.reload()
				refresher.value = true
			}
		})
	}

	//获取文章列表
	const getList = (page, limit) => {
		queryForm.value.page = page
		queryForm.value.limit = limit
		$http.get('Article/getList', queryForm.value).then(res => {
			paging.value.complete(res.data)
		})
	}
	const changeId = (e) => {
		queryForm.value.category_id = e
		paging.value.reload()
	}
</script>

<style scoped>
	.header {
		height: 176rpx;
		background: radial-gradient(circle at 15% -20%, #cef1ff 0%, transparent 35%);
		background-repeat: no-repeat;
		background-position: top center;
	}

	.w-126 {
		width: 252rpx;
	}

	.h-86 {
		height: 172rpx;
	}
</style>